<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件修饰符演示</title>
    <script src="https://unpkg.com/vue@3.4.0"></script>
    <style>
      .outer {
        padding: 20px;
        background: lightblue;
      }
      .inner {
        padding: 20px;
        background: lightcoral;
      }
      .form-demo {
        margin: 20px 0;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>事件修饰符演示</h2>

      <!-- 阻止事件冒泡 -->
      <div class="outer" @click="outerClick">
        外层div
        <div class="inner" @click.stop="innerClick">内层div (阻止冒泡)</div>
      </div>

      <!-- 阻止默认行为 -->
      <div class="form-demo">
        <form @submit.prevent="handleSubmit">
          <input type="text" v-model="formData" placeholder="输入内容" />
          <button type="submit">提交 (阻止默认提交)</button>
        </form>
      </div>

      <!-- 键盘修饰符 -->
      <div>
        <input
          type="text"
          v-model="keyboardInput"
          @keyup.enter="handleEnter"
          @keyup.esc="handleEsc"
          placeholder="按回车或ESC键"
        />
      </div>

      <!-- 只触发一次 -->
      <button @click.once="handleOnce">只能点击一次</button>

      <p>{{eventMessage}}</p>
    </div>

    <script>
      const { createApp, ref } = Vue

      const App = {
        setup() {
          const formData = ref('')
          const keyboardInput = ref('')
          const eventMessage = ref('等待事件触发...')

          const outerClick = () => {
            eventMessage.value = '外层div被点击'
          }

          const innerClick = () => {
            eventMessage.value = '内层div被点击（冒泡被阻止）'
          }

          const handleSubmit = () => {
            eventMessage.value = `表单提交: ${formData.value}`
          }

          const handleEnter = () => {
            eventMessage.value = `回车键按下: ${keyboardInput.value}`
          }

          const handleEsc = () => {
            keyboardInput.value = ''
            eventMessage.value = 'ESC键按下，输入已清空'
          }

          const handleOnce = () => {
            eventMessage.value = '这个按钮只能点击一次！'
          }

          return {
            formData,
            keyboardInput,
            eventMessage,
            outerClick,
            innerClick,
            handleSubmit,
            handleEnter,
            handleEsc,
            handleOnce
          }
        }
      }

      createApp(App).mount('#app')
    </script>
  </body>
</html>
